import React from 'react';
import { Table, Space} from 'dw-mx';
import {StringCell} from "dw-mx-table";
const { Column } = Table;


export default function ReadonlyString() {
    const data = [
        {
            key: '1',
            left: "左对齐",
            right: "右对齐",
            center: "居中",
            long: '技术类的放假了时代大师傅士大夫士大夫士大夫首发式发生峻峰量',
            ksmc: 'John Brown',
            bzlb: "1",
            yybh: 'New York No. 1 Lake Park',
            time: new Date()
        }
    ];

    return (
        <Table scroll={{ x: 880 }} dataSource={data} bordered>
            <Column ellipsis={true} title="序号" key="no" align={'center'} width={40}
                    render={(value, record, index) => {
                        return <StringCell value={index+1}/>;
                    }}/>
            <Column ellipsis={true} title="左对齐" dataIndex="left" key="left" align={'center'} width={120}
                    render={(value, record, index) => {
                        return <StringCell value={value} align={"left"} style={{color:'red'}}/>;
                    }}/>
            <Column ellipsis={true} title="右对齐" dataIndex="right" key="right" align={'center'} width={120}
                    render={(value, record, index) => {
                        return <StringCell value={value} align={"right"} />;
                    }}/>
            <Column ellipsis={true} title="居中" dataIndex="center" key="center" align={'center'} width={120}
                    render={(value, record, index) => {
                        return <StringCell value={value} align={"center"} />;
                    }}/>
            <Column ellipsis={true} title="超长省略" dataIndex="long" key="long" align={'center'} width={120}
                    render={(value, record, index) => {
                        return <StringCell value={value} />;
                    }}/>
            <Column title="操作" dataIndex="operation" key="operation" width={120}
                    render={(text, record: any, index) => {
                        return (
                            <Space>
                                <a onClick={() => alert('修改')}>修改</a>
                                <a onClick={() => alert('删除')}>删除</a>
                            </Space>
                        );
                    }}
            />
        </Table>
    );
}